<?php use_helper('I18N'); ?>
<style type="text/css">
    p img {
        background: none repeat scroll 0 0 white;
        border: 1px solid #BBBBBB;
        margin: 7px 14px 7px 0;
        padding: 5px;
        height: 50px;
        /*width: 160px;*/
    }
</style>

<script type="text/javascript">
$(function() {
    $.populateDOB({
                dobYear : $("#dob_year")
                ,dobMonth : $("#dob_month")
                ,dobDay : $("#dob_day")
                ,dobFull : $("#dob")
                ,defaultValue : "<?php echo $cms_member->getDob()?>"
            });

    var container = $('div.errorContainer');
    $("#registerForm").validate({
                errorLabelContainer: $("ol", container),
                errorContainer: $('div.errorContainer'),
                wrapper: 'li',
                meta: "validate",
                messages : {
                    fullname: {
                        required: "<?php echo __('%1% is required.', array('%1%' => 'Full name')) ?>"
                    },
                    address1: {
                        required: "<?php echo __('%1% is required.', array('%1%' => 'Address')) ?>"
                    },
                    city: {
                        required: "<?php echo __('%1% is required.', array('%1%' => 'City')) ?>"
                    },
                    state: {
                        required: "<?php echo __('%1% is required.', array('%1%' => 'State')) ?>"
                    },
                    postcode: {
                        required: "<?php echo __('%1% is required.', array('%1%' => 'Postcode')) ?>"
                    },
                    country: {
                        required: "<?php echo __('%1% is required.', array('%1%' => 'Country')) ?>"
                    },
                    telephone: {
                        number: "<?php echo __('Please enter your %1% <b>Number</b>.', array('%1%' => 'Telephone')) ?>"
                        , required: "<?php echo __('%1% is required.', array('%1%' => 'Telephone')) ?>"
                    },
                    password: {
                        required: "<?php echo __('%1% is required.', array('%1%' => 'password')) ?>"
                    },
                    confirmation: {
                        required: "<?php echo __('%1% is required.', array('%1%' => 'Confirm Password')) ?>"
                        , equalTo: "<?php echo __('Please enter the same password as above') ?>"
                    },
                    email_address: {
                        required: "<?php echo __('%1% is required.', array('%1%' => 'Email address')) ?>"
                        , remote: "<?php echo __('Email address already in use.') ?>"
                    }
                },
                rules : {
                    "fullname" : {
                        required : true,
                        minlength : 6
                    },
                    "address1" : {
                        required : true,
                        minlength : 10
                    },
                    "city" : {
                        required : true
                    },
                    "state" : {
                        required : true
                    },
                    "postcode" : {
                        required : true,
                        minlength : 3
                    },
                    "country" : {
                        required : true
                    },
                    "telephone" : {
                        required : true
                        , number:true
                        , minlength : 10
                    },
                    "email_address" : {
                        required : true
                        , email: true
                        , remote: "/member/verifyEmailAddress"
                    },
                    "password" : {
                        required : true
                    },
                    "confirmation" : {
                        required : true,
                        minlength : 6,
                        equalTo: "#password-new"
                    }
                },
                submitHandler: function(form) {
                    form.submit();
                }
            });
    $("#validate-close").click(function() {
        $(container).hide(500);
    });
    $("#btnBack").button({
        icons: {
            primary: "ui-icon-circle-arrow-w"
        }
    });
    $("#btnUpdate").button({
        icons: {
            primary: "ui-icon-circle-check"
        }
    }).click(function(){
        $("#frmAccountPassword").submit();
    });
});
</script>

<div style="z-index: 999; position: fixed; top:0px; right:0px;"
     class="errorContainer ui-state-error-validate ui-corner-all container ui-widget" id="validateContainer">
    <p>
        <span style="float: left; margin-right: .3em;" class="ui-red ui-icon ui-icon-alert"></span>
        <a href="#" id="validate-close" role="button" class="ui-dialog-titlebar-close ui-corner-all">
            <span style="position:absolute; right : -2px; margin-right: .3em; border: 1px solid #FBCB09; color: #C77405;"
                  class="ui-icon ui-icon-closethick"></span>
        </a>
        <strong id='_msg'>
            <ol style="padding-top:0px;margin-top:0px;margin-bottom:0px"></ol>
        </strong>
    </p>
</div>

<div id="content">

    <!-- ========== CATEGORIES TABS ========= -->
    <!-- ==================================== -->
    <table id="contentMainWrapper" border="0" cellpadding="0" cellspacing="0" width="100%">
        <tbody>
        <tr>
            <td id="column-left" style="width: 215px;">
                <div style="width:215px;">
                    <!--// bof: categories //-->
                    <div class="box" id="categories" style="width:215px;">
                        <div class="box-border">
                            <div class="box-head">
                                <?php echo __('Categories') ?>
                            </div>
                            <div class="box-body">
                                <?php include_component('component', 'categoriesSideMenu') ?>
                            </div>
                        </div>
                    </div>
                    <!--// eof: categories //-->
                    <!--// bof: specials //-->
                    <div class="box" id="specials" style="width:215px;">
                        <div class="box-border">
                            <div class="box-head">
                                <a href="<?php echo url_for("/product/specialItem") ?>"><?php echo __('Specials') ?></a>
                            </div>
                            <div class="box-body">
                                <?php include_component('component', 'specialsSideMenu', array('param' => 'will implement for categoryType')) ?>
                            </div>

                        </div>
                    </div>
                    <!--// eof: specials //-->
                </div>
            </td>
            <td id="column-center" valign="top">
                <!-- BOF- BANNER #3 display -->
                <!-- EOF- BANNER #3 display -->
                <div class="column-center-padding">
                    <!--content_center-->
                    <!-- bof breadcrumb -->
                    <!-- eof breadcrumb -->

                    <!-- bof upload alerts -->
                    <!-- eof upload alerts -->
                    <div class="centerColumn" id="accountEditDefault">
                        <form name="frmUpdateAccount" action="/member/updateAccount" method="post">
                            <?php if ($sf_flash->has('errorMsg')): ?>
                                <?php echo $sf_flash->get('errorMsg') ?>
                            <?php endif; ?>
                            <h1 id="accountDefaultHeading">Update Account Information</h1>

                                <fieldset>
                                    <legend><?php echo __('Company Details') ?></legend>
                                    <label class="inputLabel" for="company"><?php echo __('Company Name') ?>:</label>
                                    <input name="company" size="41" maxlength="64" id="company" type="text" value="<?php echo $cms_member->getCompanyName()?>">
                                </fieldset>

                                <fieldset>
                                    <legend><?php echo __('Personal Details') ?></legend>
                                    <input name="gender" value="M" id="gender-male" checked="checked" type="radio"><label class="radioButtonLabel" for="gender-male">Mr.</label>
                                    <input name="gender" value="F" id="gender-female" type="radio"><label class="radioButtonLabel" for="gender-female">Ms.</label>
                                    <span class="alert">*</span>
                                    <br class="clearBoth">

                                    <label class="inputLabel" for="firstname">Full Name <span class="alert">*</span>:</label>
                                    <input name="fullname" size="33" maxlength="32" id="firstname" type="text" value="<?php echo $cms_member->getFullname()?>">
                                    <br class="clearBoth">

                                    <label class="inputLabel" for="nric">NRIC :</label>
                                    <input name="nric" size="33" maxlength="32" id="nric" type="text"  value="<?php echo $cms_member->getNric()?>" style="margin: 0 0 3px; vertical-align: middle; width: 49%;">
                                    <br class="clearBoth">

                                    <label class="inputLabel" for="telephone">Telephone <span class="alert">*</span>:</label>
                                    <input name="telephone" size="33" maxlength="32" id="telephone" type="text" value="<?php echo $cms_member->getContact()?>">
                                    <br class="clearBoth">

                                    <label class="inputLabel" for="fax">Fax Number:</label>
                                    <input name="fax" id="fax" type="text" value="<?php echo $cms_member->getFax()?>">
                                    <br class="clearBoth">

                                    <label class="inputLabel" for="dob">Date of Birth <span class="alert">*</span>:</label>
                                    <select id="dob_year" style="width:60"></select>
                                    <select id="dob_month" style="width:40"></select>
                                    <select id="dob_day" style="width:40"></select>
                                    <input name="dob" readonly="readonly" type="hidden" id="dob" tabindex="14" class="bp_05" value="<?php echo $cms_member->getDob()?>"/>
                                    <br class="clearBoth">
                                </fieldset>

                                <fieldset>
                                    <legend>Newsletter and Email Details</legend>
                                    <?php
                                        $check = "";
                                        if ($cms_member->getSubscribeNewsletter() == Globals::DB_YES) {
                                            $check = " checked='checked'";
                                        }
                                    ?>
                                    <input name="newsletter" value="1" id="newsletter-checkbox" type="checkbox" <?php echo $check;?>>
                                    <label class="checkboxLabel" for="newsletter-checkbox">Subscribe to Our Newsletter.</label>
                                    <br class="clearBoth">
                                </fieldset>

                                <div class="buttonRow forward">
                                    <button id="btnUpdate"><?php echo __('Update') ?></button>
                                </div>
                                <div class="buttonRow back">
                                    <a id="btnBack" href="<?php echo url_for("/member/myAccount");?>"><?php echo __('Back') ?></a>
                                </div>
                            <br class="clearBoth">

                        </form>
                    </div>
                    <div class="clear"></div>
                    <!--eof content_center-->
                </div>
                <!-- BOF- BANNER #4 display -->
                <!-- EOF- BANNER #4 display -->
            </td>
        </tr>
        </tbody>
    </table>
</div>